<template>
	<view class="doctor-container">
		<scroll-view class="scroll-view_H" scroll-y="true">
			<view class="top flex">
				<!-- <img class="avatar" :src="" alt=""> -->
				<u--image width="80" height="80" :src="doctorInfo.doctorImg"
					shape="circle"></u--image>
				<view class="flex flex-column m-t-15 p-l-20">
					<view class="flex align-center">
						<text class="color-333 f-s-32 f-bold">{{doctorInfo.doctorName}}</text>
						<text class="color-333 f-s-30 m-l-10">{{doctorInfo.doctorTitle}}</text>
					</view>
					<text class="instruction color-999 f-s-28 m-t-15">{{doctorInfo.articleContent}}</text>
					<text class="color-main m-t-15"
						v-if="doctorInfo.articleContent&&doctorInfo.articleContent.length>80" @click="open">查看更多</text>
				</view>
			</view>
			<view class="registra-date">
				<view class="item flex flex-column m-t-15" v-for="(item,index) in lists" :key="index">
					<view class="" v-if="dbgh == 1 && cerrentDate == item.pbrq">
						<view class="date">
							<text class="f-s-30 m-l-20" style="line-height: 90rpx;">{{item.pbrq}}</text>
						</view>
						<!-- <view class="f-s-30 color-999 p-20 text-center m-l-20 m-r-20" v-if="Number(item.yyysl) >= Number(item.hyzsl)|| (Number(item.hyzsl) - Number(item.yyysl) == '0')">
							<view style="">
								<text
									class="remaining-numbe color-fff f-s-28">余号0</text>
							</view>
							<text class="disabled right">约满</text>
						</view> -->
						<view v-if="Number(item.yyysl) >= Number(item.hyzsl)|| (Number(item.hyzsl) - Number(item.yyysl) == '0')" class="flex align-center f-s-30 p-t-20 p-b-20 m-l-20 m-r-20">
										
							<view style="">
								<text
									class="remaining-numbe color-fff f-s-28">余号0</text>
							</view>
							<text
								style="flex: 1;color: #FF7C4D;margin-left: 22rpx;">￥{{Number(item.ghf) + Number(item.zcf)}}</text>
							<view class="color-999 disabled">约满</view>
						</view>
						<view v-else class="flex align-center f-s-30 p-t-20 p-b-20 m-l-20 m-r-20">
				
							<view style="">
								<text
									class="remaining-numbe color-fff f-s-28">余号{{Number(item.hyzsl) - Number(item.yyysl)}}</text>
							</view>
							<text
								style="flex: 1;color: #FF7C4D;margin-left: 22rpx;">￥{{Number(item.ghf) + Number(item.zcf)}}</text>
							<view class="right" @click.stop="showNumberSource(item)">挂号</view>
						</view>
					</view>
					<view class="" v-if="cerrentDate != item.pbrq">
						<view class="date">
							<text class="f-s-30 m-l-20" style="line-height: 90rpx;">{{item.pbrq}}</text>
						</view>
						<!-- <view class="f-s-30 color-999 p-20 text-center" v-if="Number(item.yyysl) >= Number(item.hyzsl) || (Number(item.hyzsl) - Number(item.yyysl) == '0')">
							<text class="disabled">约满</text>
						</view> -->
						<view v-if="Number(item.yyysl) >= Number(item.hyzsl) || (Number(item.hyzsl) - Number(item.yyysl) == '0')" class="flex align-center f-s-30 p-t-20 p-b-20 m-l-20 m-r-20">
							<!-- <text style="flex: 1;" class="color-323232">上午</text> -->
							<view style="">
								<text
									class="remaining-numbe color-fff f-s-28">余号{{Number(item.hyzsl) - Number(item.yyysl)}}</text>
							</view>
							<text style="flex: 1;color: #FF7C4D;margin-left: 22rpx;">￥{{Number(item.ghf) + Number(item.zcf)}}</text>
							<view class="disabled color-999">约满</view>
						</view>
						<view v-else class="flex align-center f-s-30 p-t-20 p-b-20 m-l-20 m-r-20">
							<!-- <text style="flex: 1;" class="color-323232">上午</text> -->
							<view style="">
								<text
									class="remaining-numbe color-fff f-s-28">余号{{Number(item.hyzsl) - Number(item.yyysl)}}</text>
							</view>
							<text style="flex: 1;color: #FF7C4D;margin-left: 22rpx;">￥{{Number(item.ghf) + Number(item.zcf)}}</text>
							<view class="right" @click.stop="showNumberSource(item)">预约</view>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>

		<!-- 医生详情 -->
		<u-popup :show="showDoctorDetail" :round="10" :safeAreaInsetBottom="true" mode="bottom" @close="close">
			<view class="top-bar flex align-center justify-between p-t-30 p-r-30">
				<text class="f-s-34"></text>
				<img style="width: 34rpx;" src="@/static/images/homeIndex/close-ico.png" @click="close"></img>
			</view>
			<view style="height: 70vh;">
				<scroll-view class="scroll-view_visit" scroll-y="true">
					<view class="flex flex-column align-center" style="padding-top: 0rpx;">
						<!-- <img class="avatar" :src="" alt=""> -->
						<u--image width="80" height="80" :src="doctorInfo.doctorImg"
							shape="circle"></u--image>
						<text class="f-bold color-323232 m-t-30 f-s-36">{{doctorInfo.doctorName}}</text>
						<view class="flex align-center m-t-15">
							<text class="color-333 f-s-30">{{doctorInfo.doctorTitle}} {{doctorInfo.deptName}}</text>
						</view>
						<view class="m-t-30" style="width: 94%;margin-left: 3%;">
							<view class="custom-title flex align-center">
								<view class="dot"></view>
								<text class="f-bold color-323232 f-s-32">医生简介</text>
							</view>
							<view class=" p-l-12 p-r-12 m-t-15">
								<text class="color-666 f-s-30">{{doctorInfo.articleTitle}}</text>
							</view>
						</view>
						<view class="m-t-30" style="width: 94%;margin-left: 3%;">
							<view class="custom-title flex align-center">
								<view class="dot"></view>
								<text class="f-bold color-323232 f-s-32">医生简介</text>
							</view>
							<view class="p-l-12 p-r-12 m-t-15">
								<text class="color-666 f-s-30">{{doctorInfo.articleContent}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 排班详情 -->
		<u-popup :show="showNumTime" :round="10" :safeAreaInsetBottom="true" mode="bottom" @close="closeNumTime">
			<view class="top-bar border-b flex align-center justify-between p-30">
				<text class="f-s-34 ">请选择时间段</text>
				<img style="width: 34rpx;" src="@/static/images/homeIndex/close-ico.png" @click="closeNumTime"></img>
			</view>
			<scroll-view class="scroll-view_visit" scroll-y="true" style="height:70vh;">
				<view class="numberSource">
					<view class="item" v-for="(item,index) in doctorTimeList" :key="index">
						<view class="left">
							{{item.sjdFz}}
						</view>
						<view class="center">
							剩余【{{item.num}}】
						</view>
						<view class="right" v-if="judgeIsCanClick(item)" @click.stop="reservation(item)">
							{{btnText}}
						</view>
						<view v-else class="right" style="background-color: #eee;color: #999;">
							{{btnText}}
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-modal :show="showModal" title="提示" :content='content' :showCancelButton='true' @confirm='confirmOrder'
			@cancel='cancelOrder'></u-modal>
	</view>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
	import config from "@/config.js";
	import {
		getDoctorDetail,
		getScheduInfoList,
		getScheduInfo,
		getConfigKey
	} from "@/api/home/home.js";
	import {
		reservation,
		checkReservation,
		payUnifiedOrder,
		checkReservationToday
	} from "@/api/pay/index.js";
	import {
		getCurrentDate,
		getTimeStamp
	} from "@/utils/common.js";
	import {
		encrypt,
		decrypt
	} from '@/utils/sm4Util.js'
	export default {
		data() {
			return {
				id: '',
				lists: [],
				showDoctorDetail: false,
				doctorInfo: {},
				cerrentDate: '',
				showNumTime: false,
				doctorTimeList: [],
				parms: {},
				btnText: '挂号',
				showModal: false,
				obj: {},
				content: '',
				isDirectPay: '1', //默认挂完号直接支付
				currentSelectDay: '',
				dbgh: '',
			}
		},
		onLoad: function(res) {
			this.id = res.id
			this.cerrentDate = getCurrentDate()
			this.getConfig()
			this.getData()
		},
		methods: {
			/* 关闭弹窗 */
			close() {
				this.showDoctorDetail = false
			},
			/* 打开弹窗 */
			open() {
				this.showDoctorDetail = true
			},
			/* 获取医生详情 */
			getData() {
				getDoctorDetail(this.id).then(res => {
					console.log(res)
					this.doctorInfo = res.data;
					// 替换域名
					if(this.doctorInfo.doctorImg){
						let imgurl = this.doctorInfo.doctorImg;
						let index = imgurl.indexOf('/profile');
						let urlParts = imgurl.slice(index);
						this.doctorInfo.doctorImg = config.baseUrl + urlParts;
					}else if(this.doctorInfo.sex == '2'){
						this.doctorInfo.doctorImg = require('@/static/images/homeIndex/doct-g.png');
					}else if(this.doctorInfo.sex == '1'){
						this.doctorInfo.doctorImg = require('@/static/images/homeIndex/doct-m.png');
					}else{
						this.doctorInfo.doctorImg = require('@/static/images/homeIndex/avator-doctor.png');
					}
					
					let params = {
						doctorCode: res.data.doctorCode,
						deptCode: res.data.deptCode
					}
					this.scheduInfoData(params)
				});
			},
			/* 获取参数配置 */
			getConfig() {
				getConfigKey('sys_direct_pay').then(res => {
					this.isDirectPay = res.msg
				});
				// 是否开启当班挂号
				getConfigKey('dbgh').then(res => {
					this.dbgh = res.msg;
				});
			},
			/* 获取排班列表 */
			scheduInfoData(params) {
				getScheduInfoList({
					gh: params.doctorCode,
					deptCode: params.deptCode
				}).then(res => {
					console.log(res)
					if (res.data.length != 0) {
						this.lists = res.data
					} else { //今日无号
						this.$msg("当前医生暂无排班信息");
					}

				});
			},
			closeNumTime() {
				this.showNumTime = false
			},
			/* 校验挂号按钮是否可点击 */
			judgeIsCanClick(item) {
				if (getCurrentDate() == this.currentSelectDay) {
					let endTime = item.sjdFz
					let index = endTime.lastIndexOf("\~");
					let str = endTime.substring(index + 1, endTime.length);
					let newDate = new Date().getTime()
					let endDate = new Date(getTimeStamp(new Date()) + ' ' + str +
						':00').getTime()
					if (newDate > endDate) {
						return false
					} else {
						return true
					}
				} else {
					return true
				}
			},
			showNumberSource(item) {
				console.log(item)
				if (!uni.getStorageSync('currentVisitCard')) {
					this.$msg("请先绑定就诊人")
					uni.navigateTo({
						url: '/pages/addHealthCard/index?jumpType=2'
					})
					return
				}
				this.currentSelectDay = item.pbrq
				this.parms = {
					reservFee: item.ghf,
					doctorCode: item.gh,
					doctorName: item.xm,
					deptCode: item.dept_code,
					deptName: item.dept_name,
					scheduleTime: item.banci,
					scheduleWeek: item.week,
					scheduleType: item.ghlb,
					scheduleNum: item.hyzsl,
					leaveNum: item.hyzsl - item.yyysl,
					medicalFee: item.zcf,
					scheduleDate: item.pbrq,
					totalAmount: item.ghf + item.zcf,
				}
				let obj = {
					hospitalCode: JSON.parse(uni.getStorageSync('hospital')).hospitalCode,
					deptCode: item.dept_code,
					doctorCode: item.gh,
					doctorScheduleid: item.id
				}
				getScheduInfo(obj).then(res => {
					this.doctorTimeList = res.data
					if (this.cerrentDate == item.pbrq) {
						this.btnText = '挂号'
					} else {
						this.btnText = '预约'
					}
					this.showNumTime = true
				})
			},
			/* 挂号 */
			reservation(item) { //挂号保存
				let openid = uni.getStorageSync('openid') || ''
				this.obj = {
					hospitalCode: JSON.parse(uni.getStorageSync('hospital')).hospitalCode,
					openId: openid,
					name: JSON.parse(uni.getStorageSync('currentVisitCard')).name,
					reservType: this.btnText == '挂号' ? '2' : '1',
					cardNum: JSON.parse(uni.getStorageSync('currentVisitCard')).cardNum,
					orderType: "WeChat",
					orderStatu: '0',
					doctorCode: this.parms.doctorCode,
					doctorName: this.parms.doctorName,
					deptCode: this.parms.deptCode,
					deptName: this.parms.deptName,
					scheduleDate: this.parms.scheduleDate,
					scheduleTime: this.parms.scheduleTime,
					scheduleWeek: this.parms.scheduleWeek,
					scheduleType: this.parms.scheduleType,
					scheduleNum: this.parms.scheduleNum,
					leaveNum: this.parms.leaveNum,
					timeRange: item.sjdFz,
					reservFee: this.parms.reservFee,
					medicalFee: this.parms.medicalFee,
					totalAmount: this.parms.totalAmount,
					scheduleId: item.id,
				}
				let a = this.btnText == '挂号' ? '挂' : '预约'
				this.content = '确认要' + a + this.parms.doctorName + '医生:' + item.sjdFz +
					'的号？'
				this.showModal = true
				this.showNumTime = false
			},
			/* 挂号缴费 */
			confirmOrder() {
				let _that = this
				if (this.btnText == '挂号') { //挂完号直接支付
					let names = JSON.parse(uni.getStorageSync('currentVisitCard')).name
					let params = {
						name: names,
						reservType: '2',
						cardNum: JSON.parse(uni.getStorageSync('currentVisitCard')).cardNum,
						doctorCode: this.parms.doctorCode,
						doctorName: this.parms.doctorName,
						deptCode: this.parms.deptCode,
						deptName: this.parms.deptName,
						totalAmount: this.parms.totalAmount,
						reservfee: this.parms.reservFee,
						medicalfee: this.parms.medicalFee,
						timeRange:this.obj.timeRange,
					}

					checkReservationToday(params).then(ress => { //校验是否可以支付
						if (ress.code == 200) {
							/* 挂号*/
							reservation(this.obj).then(res => {
								/* 根据配置判断是否需要支付 */
								if (this.isDirectPay != '1') {
									this.$msg("挂号成功!")
									this.showModal = false
									uni.navigateTo({
										url: '/pages/mine/confirmRegistration/index'
									})
								} else {
									this.showModal = false
									let openid = uni.getStorageSync('openid') || ''
									let obj = {
										"hospitalCode": JSON.parse(uni.getStorageSync('hospital'))
											.hospitalCode, //医院微信唯一标识
										"openId": openid, //微信唯一标识
										"bh": JSON.parse(uni.getStorageSync('currentVisitCard'))
											.cardNum, //住院号/卡号
										"recipelNum": ress.data.cfhList, //处方号（门诊业务专用字段
										"orderAmount": res.data.totalAmount, //订单金额
										"orderDesc": this.btnText == '预约' ? '预约挂号-' + names : '当班挂号-' +
											names, //订单描述（医卡通，预约，门诊支付 住院押金）
										"payType": "weChat", //支付类型（weChat:微信 Alipay:支付宝）
										"orderType": "3" //订单类型（1医卡通，2预约，3门诊支付 4住院押金）
									}
									let param = {
										params: encrypt(JSON.stringify(obj))
									}
									payUnifiedOrder(param).then(resporns => {
										WeixinJSBridge.invoke('getBrandWCPayRequest', {
												"appId": resporns.data.appId,
												"timeStamp": resporns.data.timeStamp,
												"nonceStr": resporns.data.nonceStr,
												"package": resporns.data.package,
												"signType": "MD5",
												"paySign": resporns.data.paySign,
											},
											function(resporns) { // 调起微信支付成功
												if (resporns.err_msg ==
													"get_brand_wcpay_request:ok") {
													_that.$msg("支付成功!");

												} else if (resporns.err_msg ==
													"get_brand_wcpay_request:cancel") {
													_that.$msg("用户取消支付!");

												} else {
													_that.$msg("支付失败,请重新支付!" + resporns
														.err_msg);
												}
											});
									})
								}

							}).catch(error => {
								this.showModal = false
							})
						}
					}).catch(error => {
						this.showModal = false
					})

				} else { //挂完号跳转我的预约
					reservation(this.obj).then(res => {
						if (res.code == 200) {
							this.showModal = false
							this.$msg("预约成功!")
							uni.navigateTo({
								url: '/pages/mine/confirmRegistration/index'
							})
						}
					}).catch(error => {
						this.showModal = false
					})
				}
			},
			cancelOrder() {
				this.showModal = false
				this.showNumTime = true
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		.disabled{
			background-color: #f1f1f1;
			 padding: 6rpx 24rpx;
			 border-radius: 10rpx;
		}
		.doctor-container {
			width: 100%;
			height: 100%;
			background-color: #F6F7F9;

			.right {
				background-color: #4D8EFF;
				padding: 6rpx 24rpx;
				border-radius: 10rpx;
				color: #fff;
				font-size: 28rpx;
			}

			.scroll-view_visit {
				width: 100%;
				height: 100%;

				.numberSource {
					font-size: 30rpx;
					padding: 0 20rpx;
					border-top: 1px solid #eee;

					.item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 24rpx;
						border-bottom: 1px solid #eee;

					}
				}

				.custom-title {
					.dot {
						width: 10rpx;
						height: 32rpx;
						border-radius: 10rpx;
						background-color: #4D8EFF;
						margin-right: 10rpx;
					}
				}

				.avatar {
					width: 160rpx;
				}

			}

			.scroll-view_H {
				width: 100%;
				height: 100%;

				.registra-date {
					width: 94%;
					margin-left: 3%;

					.item {
						width: 100%;
						background-color: #fff;
						border-radius: 12rpx;

						.remaining-numbe {
							background-color: #4D8EFF;
							padding: 4rpx 10rpx;
							border-radius: 10rpx;
						}

						.reservation {
							background-color: #4D8EFF;
							padding: 6rpx 20rpx;
							border-radius: 10rpx;
						}

						.date {
							border-bottom: 1px solid rgba(0, 0, 0, 0.05);
						}
					}
				}

				.top {
					width: 100%;
					padding: 30rpx 20rpx;
					background-color: #fff;

					.instruction {
						overflow: hidden; //超出的文本隐藏
						display: -webkit-box;
						-webkit-line-clamp: 4; // 超出多少行
						-webkit-box-orient: vertical;
					}

					.avatar {
						width: 140rpx;
						height: 140rpx;
					}
				}
			}
		}
	}
</style>